<template>
  <div class="section">
    <div class="container">
      <div class="row full-height justify-content-center">
        <div class="col-12 text-center align-self-center py-5">

          <h6 class="mb-0 pb-3"><span>Log In </span><span>Sign Up</span></h6>
          <input id="reg-log" ref="regLog" class="checkbox" type="checkbox" name="reg-log" @click="closeFn">
          <label for="reg-log" />
          <div class="card-3d-wrap mx-auto">
            <div class="card-3d-wrapper">
              <div class="card-front">
                <div class="center-wrap">
                  <div class="text-center">
                    <h4 class="mb-4 pb-3 mb-0">Log In</h4>

                    <el-form
                      ref="ruleForm"
                      class="form-group"
                      :model="loginForm"
                      :rules="loginRules"
                    >
                      <el-form-item prop="identifier">
                        <i class="input-icon uil uil-user" />
                        <el-input
                          id="logemail"
                          v-model="loginForm.identifier"
                          type="email"
                          name="logemail"
                          placeholder="输入你的用户名"
                          autocomplete="off"
                        /></el-form-item>

                      <el-form-item prop="password">
                        <i class="input-icon uil uil-lock-alt" />

                        <el-input
                          id="logpass"
                          v-model="loginForm.password"
                          type="password"
                          name="logpass"

                          placeholder="输入你的密码"
                          autocomplete="off"
                        /></el-form-item>
                    </el-form>
                    <a href="#" class="btn mt-4 mb-0" @click="handleLogin">登入</a>
                  </div>
                </div>
              </div>
              <!-- 注册 -->
              <div class="card-back">
                <div class="center-wrap">
                  <div class=" text-center">
                    <h4 class="mb-4 pb-3 mb-0 ">Sign Up</h4>
                    <el-form

                      :model="ruleForm"
                      :rules="rules"
                    >
                      <el-form-item prop="username">
                        <i class="input-icon uil uil-user" />
                        <el-input id="logname" v-model="ruleForm.username" type="text" name="logname" placeholder="输入用户名" autocomplete="off" />
                      </el-form-item>

                      <el-form-item prop="email">
                        <i class="input-icon uil uil-at" />
                        <el-input id="logemail" v-model="ruleForm.email" type="email" name="logemail" placeholder="输入你的邮箱" autocomplete="off" />
                      </el-form-item>

                      <el-form-item prop="password">
                        <i class="input-icon uil uil-lock-alt" />
                        <el-input id="logpass" v-model="ruleForm.password" type="password" name="logpass" placeholder="输入你的密码" autocomplete="off" />
                      </el-form-item>
                    </el-form>
                    <a href="#" class="btn mt-4 mb-0" @click="register">注册</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>
<script>
import { register } from '@/api/login'
export default {
  name: 'Login',
  data() {
    return {
      // 登入
      loginForm: {
        identifier: 'admin1',
        password: '123456'
      },
      loginRules: {
        identifier: [
          { required: true, trigger: 'blur', message: '输入用户名' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '输入密码' }
        ]
      },
      //   编辑
      ruleForm: {
        username: '',
        password: '',
        email: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {

    // 登入
    async handleLogin() {
      await this.$refs.ruleForm.validate()
      await this.$store.dispatch('user/login', this.loginForm)
      this.$router.push('/')
      window.location.reload()
    },
    // 注册
    async register() {
      await register(this.ruleForm)
      this.$refs.regLog.click()
    //   console.log(this.$refs.regLog)
    },
    // 关闭清空
    closeFn() {
      this.ruleForm = {
        username: '',
        password: '',
        email: ''
      }
    }
  }
}
</script>
<style  lang='scss' scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css');
@import url('https://unicons.iconscout.com/release/v2.1.9/css/unicons.css');
/* Please ? this if you like it! */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

body{
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #c4c3ca;
	background-color: #1f2029;
	overflow-x: hidden;
}

.mb-0{
    color: #fff;
}
a {
	cursor: pointer;
  transition: all 200ms linear;
}
a:hover {
	text-decoration: none;
}
.link {
  color: #c4c3ca;
}
.link:hover {
  color: #ffeba7;
}
p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
}
h4 {
  font-weight: 600;
}
h6 span{
  padding: 0 20px;
  text-transform: uppercase;
  font-weight: 700;
}
.section{
  position: relative;
  width: 100%;
  display: block;
  // background-color: #68dd7de2;
  background-image: url('~@/assets/common/img.jpg');
  background-size:100% 100%;
}
.full-height{
  min-height: 100vh;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  display: block;
  text-align: center;
  width: 60px;
  height: 16px;
  border-radius: 8px;
  padding: 0;
  margin: 10px auto;
  cursor: pointer;
  background-color: #ffeba7;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before{
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffeba7;
  background-color: #102770;
  font-family: 'unicons';
  content: '\eb4f';
  z-index: 20;
  top: -10px;
  left: -10px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  transition: all 0.5s ease;
}
.checkbox:checked + label:before {
  transform: translateX(44px) rotate(-270deg);
}

.card-3d-wrap {
  position: relative;
  width: 440px;
  max-width: 100%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 800px;
  margin-top: 60px;
}
.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 600ms ease-out;
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  background-color: #20223a;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 300%;
  position: absolute;
  border-radius: 6px;
  opacity: 0.666;
  left: 0;
  top: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
}
.center-wrap{
  position: absolute;
  width: 100%;
  padding: 0 35px;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 35px) perspective(100px);
  z-index: 20;
  display: block;
}

.form-group{
  color: #000;
  position: relative;
  display: block;
    margin: 0;
    padding: 0;
}
.el-input {
  padding: 4px 0px;
  padding-left: 0px;
  height: 43px;
  width: 72%;
  font-weight: 500;
  border-radius: 4px;
  font-size: 15px;
  line-height: 10px;
  letter-spacing: 0.5px;
  outline: none;
  color: #000;
  opacity: 1;
  border: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.form-style:focus,
.form-style:active {
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
  position: absolute;
  top: 0;
  left: 18px;
  height: 48px;
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  color: #ffeba7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.form-group input:-ms-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input::-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input::-webkit-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus:-ms-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus::-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus:-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus::-webkit-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.btn{
  border-radius: 4px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition : all 200ms linear;
  transition: all 200ms linear;
  padding: 0 30px;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
  border: none;
  background-color: #ffeba7;
  color: #102770;
  box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);
}
.btn:active,
.btn:focus{
  background-color: #102770;
  color: #ffeba7;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.btn:hover{
  background-color: #102770;
  color: #ffeba7;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}

.logo {
	position: absolute;
	top: 30px;
	right: 30px;
	display: block;
	z-index: 100;
	transition: all 250ms linear;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
}

</style>
